<template>
  <el-dialog :title="inOut == 1 ? '容器入库' : '容器出库'" v-model="dialogVisible" width="60%">
    <el-form label-width="120px" @submit.prevent>
      <el-form-item label="选择仓库">
        <el-radio-group v-model="whId">
          <el-radio-button v-for="i in whOptions" :key="i.WarehouseId" :label="`${i.WarehouseCode} ${i.WarehouseName}`"
            :value="i.WarehouseId">
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="mt-20" label="扫描容器" v-if="inOut == 1">
        <el-input ref="containerCode" v-model="containerCode" :disabled="!whId" placeholder="扫描容器条码或输入按回车"
          @keyup.enter.prevent="afterScanContainer" clearable></el-input>
      </el-form-item>
      <el-form-item class="mt-20" label="容器个数" v-if="inOut == 1 && isEmptyContainer">
        <el-input-number v-model="containerQty" :disabled="!whId" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item class="mt-20" :label="inOut == 1 ? '起始点位' : '目标点位'">
        <el-radio-group v-model="positionId" :disabled="!canChoosePos">
          <el-radio-button v-for="i in positionOptions" :key="i.PositionId" :value="i.PositionId"
            :label="i.PositionCode">
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template v-slot:footer>

      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { isEmpty } from 'lodash';

export default {
  components: {},
  props: {
    inOut: {
      type: Number,
      default: 1, //1入库 2出库
    },
    modelValue: {
      type: Boolean,
      default: false,
    },
    warehouseId: {
      type: Number,
      default: 0,
    },
    container: {
      type: String,
      default: null,
    },
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.modelValue
      },
      set: function (v) {
        this.$emit('update:modelValue', v)
      },
    },
  },
  data: function () {
    return {
      whId: null,
      containerCode: null,
      positionId: null,
      isEmptyContainer: false,
      containerQty: null,
      whOptions: [],
      positionOptions: [],
      btnLoading: false,
      canChoosePos: false,
    }
  },
  watch: {
    warehouseId(v) {
      this.whId = v
    },
    whId(v) {
      this.getPositions()
    },
    inOut(v) {
      this.getPositions()
    },
    container(v) {
      this.containerCode = this.container
      if (this.whId > 0) {
        this.afterScanContainer()
      }
    },
    visible(v) {
      if (v && this.warehouseId && this.inOut == 1) {
        this.$nextTick(() => {
          this.$refs.containerCode.focus()
        })
      }
      if (this.inOut == 2) {
        this.canChoosePos = true
        this.positionId = null
      }
    },
  },
  methods: {
    afterScanContainer() {
      if (this.inOut != 1) return
      this.canChoosePos = false
      this.isEmptyContainer = false
      this.containerQty = 0
      //获取容器信息
      this.http.post(
        this.$api.wmsPutAway + 'ContainerPutAwayCheck',
        {
          WarehouseId: this.whId,
          ContainerCode: this.containerCode,
        },
      ).then((r) => {
        this.positionId = r.PositionId
        if (!r.PositionId) {
          this.canChoosePos = true
          this.$message.warning('请选择起始点位')
        }
        if (r.IsEmptyContainer) {
          this.isEmptyContainer = true
          this.containerQty = 1
          this.$message.warning('请确定是否需要调整空容器数量')
        }
      })
    },
    getWhs() {
      this.http.post(this.$api.warehouse + 'getPageData', {
        rows: 100,
        wheres: JSON.stringify([])
      }).then((r) => {
        this.whOptions = r.rows.sort((a, b) => (a.WarehouseCode > b.WarehouseCode ? 1 : -1))
      })
    },
    getPositions() {
      let wheres = [{ name: 'WarehouseId', value: this.whId }]
      if (this.inOut == 1) wheres.push({ name: 'IsStockInPort', value: 1 })
      else wheres.push({ name: 'IsStockOutPort', value: 1 })
      this.http.post(this.$api.position + 'getPageData', {
        rows: 100,
        wheres: JSON.stringify(wheres)
      }).then((r) => {
        this.positionOptions = r.rows.sort((a, b) => (a.PositionCode > b.PositionCode ? 1 : -1))
        this.canChoosePos = this.inOut == 2 ? true : false
      })
    },
    async confirm() {
      this.btnLoading = true
      try {
        let r
        if (this.inOut == 1) {
          r = await this.http.post(
            this.$api.wmsPutAway + 'ContainerPutAway',
            {
              WarehouseId: this.whId,
              ContainerCode: this.containerCode,
              PositionId: this.positionId,
              Qty: this.containerQty,
              //不立刻分配库位 后续扫码检查高度再分配
              DonotAllocationStock: true,
            },
          )
        } else {
          r = await this.http.post(
            this.$api.wmsPullOff + 'ContainerAutoPullOff',
            {
              WarehouseId: this.whId,
              PositionId: this.positionId,
            },
          )
        }
        this.$message.success('操作成功')
        this.containerCode = null
        this.containerQty = null
        this.positionId = null
        this.btnLoading = false
        this.dialogVisible = false
        this.isEmptyContainer = false
        this.$emit('afterConfirm', r)
      } catch (e) {
        this.btnLoading = false
      }
    },
  },
  created() {
    this.getWhs()
  },
  activated() { },
  mounted() { },
}
</script>
<style lang="scss" scoped>
:deep(.el-radio-button__orig-radio:disabled:checked+.el-radio-button__inner) {
  background-color: #7300e6;
}
</style>
